Simplify responsive utilities with $responsive-variants #545
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
also, add rounded edge utilities to fix #533
shawnbot
commented
Jul 18, 2018
| } | ||
| ``` | ||
|
|
||
| ## Responsive variants |
There was a problem hiding this comment.
These docs should live in the contributing section of the style guide.
shawnbot
commented
Jul 18, 2018
This comment has been minimized.
This comment has been minimized.
|
Well, good news! Our bundle is not significantly larger: # https://github.com/sindresorhus/gzip-size-cli
% npm i -g gzip-size-cli
% curl -L https://unpkg.com/primer/build/build.css | gzip-size --raw
21531
% cd primer/primer/modules/primer
% npm run build # generates build/build.css
% gzip-size --raw build/build.css
22050In other words, from 21.5k to 22.1k, or a 0.6k difference. |
|
Would it be possible to do a diff on the output just to make sure we aren't deleting any rules we don't want to delete? |
|
@emplums yep, let me see if I can do that. |
|
And here's the much cleaner diff after moving the responsive borders from Question for @sophshep: In strict semver terms, this change should trigger a major version bump to - Expected
+ Received
@@ -1,16 +1,16 @@
Object {
- "gzipSize": 21681,
- "humanizedSize": "131kB",
- "rules": 2166,
+ "gzipSize": 21915,
+ "humanizedSize": "133kB",
+ "rules": 2219,
"selectors": Object {
- "class": 2403,
+ "class": 2455,
"id": 0,
"pseudoClass": 238,
"pseudoElement": 196,
"specificity": Object {
- "average": 12.900548159749412,
+ "average": 12.838128116609129,
"max": 41,
},
- "total": 2554,
+ "total": 2607,
"type": 305,
"values": Array [
@@ -1305,5 +1305,4 @@
".mb-lg-8",
".mb-lg-9",
- ".mb-lg-n0",
".mb-lg-n1",
".mb-lg-n2",
@@ -1325,5 +1324,4 @@
".mb-md-8",
".mb-md-9",
- ".mb-md-n0",
".mb-md-n1",
".mb-md-n2",
@@ -1332,5 +1330,4 @@
".mb-md-n5",
".mb-md-n6",
- ".mb-n0",
".mb-n1",
".mb-n2",
@@ -1352,5 +1349,4 @@
".mb-sm-8",
".mb-sm-9",
- ".mb-sm-n0",
".mb-sm-n1",
".mb-sm-n2",
@@ -1372,5 +1368,4 @@
".mb-xl-8",
".mb-xl-9",
- ".mb-xl-n0",
".mb-xl-n1",
".mb-xl-n2",
@@ -1412,5 +1407,4 @@
".ml-lg-5",
".ml-lg-6",
- ".ml-lg-n0",
".ml-lg-n1",
".ml-lg-n2",
@@ -1426,5 +1420,4 @@
".ml-md-5",
".ml-md-6",
- ".ml-md-n0",
".ml-md-n1",
".ml-md-n2",
@@ -1433,5 +1426,4 @@
".ml-md-n5",
".ml-md-n6",
- ".ml-n0",
".ml-n1",
".ml-n2",
@@ -1447,5 +1439,4 @@
".ml-sm-5",
".ml-sm-6",
- ".ml-sm-n0",
".ml-sm-n1",
".ml-sm-n2",
@@ -1461,5 +1452,4 @@
".ml-xl-5",
".ml-xl-6",
- ".ml-xl-n0",
".ml-xl-n1",
".ml-xl-n2",
@@ -1482,5 +1472,4 @@
".mr-lg-5",
".mr-lg-6",
- ".mr-lg-n0",
".mr-lg-n1",
".mr-lg-n2",
@@ -1496,5 +1485,4 @@
".mr-md-5",
".mr-md-6",
- ".mr-md-n0",
".mr-md-n1",
".mr-md-n2",
@@ -1503,5 +1491,4 @@
".mr-md-n5",
".mr-md-n6",
- ".mr-n0",
".mr-n1",
".mr-n2",
@@ -1517,5 +1504,4 @@
".mr-sm-5",
".mr-sm-6",
- ".mr-sm-n0",
".mr-sm-n1",
".mr-sm-n2",
@@ -1531,5 +1517,4 @@
".mr-xl-5",
".mr-xl-6",
- ".mr-xl-n0",
".mr-xl-n1",
".mr-xl-n2",
@@ -1564,5 +1549,4 @@
".mt-lg-8",
".mt-lg-9",
- ".mt-lg-n0",
".mt-lg-n1",
".mt-lg-n2",
@@ -1584,5 +1568,4 @@
".mt-md-8",
".mt-md-9",
- ".mt-md-n0",
".mt-md-n1",
".mt-md-n2",
@@ -1591,5 +1574,4 @@
".mt-md-n5",
".mt-md-n6",
- ".mt-n0",
".mt-n1",
".mt-n2",
@@ -1611,5 +1593,4 @@
".mt-sm-8",
".mt-sm-9",
- ".mt-sm-n0",
".mt-sm-n1",
".mt-sm-n2",
@@ -1631,5 +1612,4 @@
".mt-xl-8",
".mt-xl-9",
- ".mt-xl-n0",
".mt-xl-n1",
".mt-xl-n2",
@@ -2207,4 +2187,76 @@
".rounded-1",
".rounded-2",
+ ".rounded-bottom-0",
+ ".rounded-bottom-1",
+ ".rounded-bottom-2",
+ ".rounded-left-0",
+ ".rounded-left-1",
+ ".rounded-left-2",
+ ".rounded-lg-0",
+ ".rounded-lg-1",
+ ".rounded-lg-2",
+ ".rounded-lg-bottom-0",
+ ".rounded-lg-bottom-1",
+ ".rounded-lg-bottom-2",
+ ".rounded-lg-left-0",
+ ".rounded-lg-left-1",
+ ".rounded-lg-left-2",
+ ".rounded-lg-right-0",
+ ".rounded-lg-right-1",
+ ".rounded-lg-right-2",
+ ".rounded-lg-top-0",
+ ".rounded-lg-top-1",
+ ".rounded-lg-top-2",
+ ".rounded-md-0",
+ ".rounded-md-1",
+ ".rounded-md-2",
+ ".rounded-md-bottom-0",
+ ".rounded-md-bottom-1",
+ ".rounded-md-bottom-2",
+ ".rounded-md-left-0",
+ ".rounded-md-left-1",
+ ".rounded-md-left-2",
+ ".rounded-md-right-0",
+ ".rounded-md-right-1",
+ ".rounded-md-right-2",
+ ".rounded-md-top-0",
+ ".rounded-md-top-1",
+ ".rounded-md-top-2",
+ ".rounded-right-0",
+ ".rounded-right-1",
+ ".rounded-right-2",
+ ".rounded-sm-0",
+ ".rounded-sm-1",
+ ".rounded-sm-2",
+ ".rounded-sm-bottom-0",
+ ".rounded-sm-bottom-1",
+ ".rounded-sm-bottom-2",
+ ".rounded-sm-left-0",
+ ".rounded-sm-left-1",
+ ".rounded-sm-left-2",
+ ".rounded-sm-right-0",
+ ".rounded-sm-right-1",
+ ".rounded-sm-right-2",
+ ".rounded-sm-top-0",
+ ".rounded-sm-top-1",
+ ".rounded-sm-top-2",
+ ".rounded-top-0",
+ ".rounded-top-1",
+ ".rounded-top-2",
+ ".rounded-xl-0",
+ ".rounded-xl-1",
+ ".rounded-xl-2",
+ ".rounded-xl-bottom-0",
+ ".rounded-xl-bottom-1",
+ ".rounded-xl-bottom-2",
+ ".rounded-xl-left-0",
+ ".rounded-xl-left-1",
+ ".rounded-xl-left-2",
+ ".rounded-xl-right-0",
+ ".rounded-xl-right-1",
+ ".rounded-xl-right-2",
+ ".rounded-xl-top-0",
+ ".rounded-xl-top-1",
+ ".rounded-xl-top-2",
".rule",
".rule::after",
@@ -2402,4 +2454,5 @@
"50%",
":-ms-input-placeholder",
+ "::-ms-input-placeholder",
"::-webkit-file-upload-button",
"::-webkit-input-placeholder",
@@ -2571,4 +2624,4 @@
],
},
- "size": 134045,
+ "size": 136526,
} |
16 tasks
|
This approach looks great. I'm embarrassed that I think I added negative margin utilities with the value of zero 😂
I can't think of any, no. |
Add responsive variants & `!important` to grid offset classes
|
I think this looks great! Agree that the $responsive-variants usage should be included in the contributing docs. |
jonrohan
approved these changes
Oct 18, 2018
This was referenced Dec 14, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR introduces a new variable in
primer-supportcalled$responsive-variants, which is a map:The second thing I've done is modify the
breakpoint()mixin so that if it gets an empty string it just outputs@contentwithout a media query. This is not useful on its own, but makes it possible to replace:with:
The resulting CSS for the above examples should be the same. The trick is just that the first iteration in the
@eachloop sets$breakpointand$variantto an empty string, which outputs the utility class without the media query. Each successive iteration outputs a responsive variation with-#{$breakpoint}substituted for#{$variant}in an@mediablock. I've added docs for this variable and pattern.Also in this PR
$responsive-variantsto use for all of our existing responsive utilities:.float-*,.d-*,.border-*,.direction-*,.m-*,.p-*,.rounded-*, et al..rounded-top-1,.rounded-right-2,.rounded-bottom-0, etc. Adding corner-specific utilities would double the number of classes, so I think this is a good compromise.-n0variants of our margin utilities in a conditional.$display-valueslist that controls which.d-*classes get generated.!importantto grid offset classes #582 ❤️ @sophshep